<template>
  <div v-if="code1">
    <el-divider v-show="isTitle">html区域</el-divider>
    <codemirror :value="code1" language="html"></codemirror>
  </div>

  <div v-if="code2">
    <el-divider v-show="isTitle">js区域</el-divider>
    <codemirror :value="code2" language="javascript"></codemirror>
  </div>
</template>

<script>
  import { js_beautify, css_beautify, html_beautify } from 'js-beautify'
  import {ref, watch} from "vue";
  import codemirror from './codemirror.vue'

  export default {
    name: "codeBeautify",
    components: {
      codemirror
    },
    props: {
      htmlCode: String,
      jsCode: String,
      isTitle: {
        type: Boolean,
        default: false
      }
    },
    setup(props) {
      const code1 = ref('')
      const code2 = ref('')

      watch(props, (newProps) => {
        let s = newProps.htmlCode

        code1.value = html_beautify(
          s,
          {
            indent_size: 2,
            space_in_empty_paren: true
          }
        )
        const v = newProps.jsCode
        code2.value = css_beautify(v, {
          indent_size: 2,
          space_in_empty_paren: true
        })
      })

      return {
        code1,
        code2
      }
    }
  }
</script>

<style scoped>

</style>
